
var CANT_CLOSED_ID = "4b94cf43-8fe2-4786-35ce-08d6bedd5511"
//Vue实例
var app = new Vue({
    el: '#app',
    data: function () {
        return {
            updatePwddialogVisible: false,
            currentTab: CANT_CLOSED_ID,
            currentMenu: CANT_CLOSED_ID,
            menuData: [],
            name: '',
            menuPid: "00000000-0000-0000-0000-000000000000",
            iframeheight: 'height:100%',
            menuheight: 'height:500px',
            mainTabs: [
                //{ id: CANT_CLOSED_ID, name: '首页', url: '/test/demo/demo5.17.html?v='+new Date().getTime() }
                //{ id: CANT_CLOSED_ID, name: '首页', url: '/test/demo/demo5.17.html', context: '<iframe ref="iframe" src="/test/demo/demo5.17.html" class="tab-iframe" :style="iframeheight"frameborder="0"></iframe>' }
                { id: CANT_CLOSED_ID, name: '首页', url: '/OperationBoard/map.html', context: '<iframe ref="iframe" src="/OperationBoard/wordMap.html" class="tab-iframe" :style="iframeheight"frameborder="0"></iframe>' }
            ]
        }
    },
    methods: {

        handleCurTabs: function (id) {
           
            var _this = this;
            if (!id) {//当前没有开着的页签 就不需要绑定右键事件
                return;
            }
            var a = $('#tab-' + id);
            a.contextMenu('myMenu', {
                //菜单样式    
                menuStyle: {
                    //boxSizing: 'border-box',
                    //'border-radius': '3px'
                    border: 'none',
                    'font-size': '12px',
                },
                //菜单项样式    
                itemStyle: {
                    //fontFamily: 'verdana',
                    backgroundColor: '#fff',
                    color: '#333',
                    padding: '5px 7px',
                    lineHeight: '24px',
                    cursor: 'pointer',
                    border: 'none',
                },
                //菜单项鼠标放在上面样式    
                itemHoverStyle: {
                    color: '#333',
                    backgroundColor: '#f0f0f0',
                    border: 'none',
                },
                //事件       
                bindings: {
                    // 关闭自身
                    'close': function (t) {
                        _this.removeTab(id);
                    },
                    // 关闭其他
                    'closeOther': function (t) {
                        _this.mainTabs.forEach(function (v, i) {
                            if (v.id != id)
                                _this.removeTab(v.id);

                        });

                    },
                    // 关闭右侧
                    'closeRight': function (t) {
                        var num = contains(_this.mainTabs, id);
                        _this.mainTabs.forEach(function (v, i) {
                            if (i > num)
                                _this.removeTab(v.id);

                        });
                    },
                    // 关闭左侧
                    'closeLeft': function (t) {
                        var num = contains(_this.mainTabs, id);
                        _this.mainTabs.forEach(function (v, i) {
                            if (i < num)
                                _this.removeTab(v.id);

                        });
                    }
                }
            })
        },


        dotest: function (id, tabname, url) {
            
            var newtab = null;
            var mythis = this;
            for (var i = 0; i < mythis.mainTabs.length; i++) {

                if (mythis.mainTabs[i].id == id) {

                    var item = mythis.mainTabs[i];
                    newtab = item;
                    break;
                }
            }
            if (newtab) {  //如果存在
                this.currentTab = newtab.id
                return
            }
            var html = '<iframe ref="iframe" src="' + url + '" class="tab-iframe" style="iframeheight"frameborder="0"></iframe>'

            newtab = { id: id, name: tabname, url: url, context: html }

            this.mainTabs.push(newtab);
            //TODO: 去异步加载html渲染,   --没想出来怎么实现,只好用iframe实现加载
            this.currentTab = id;

        },
        removeTab: function (targetName) {
            console.log(targetName);
            console.log(this.mainTabs.id);
            if (targetName == CANT_CLOSED_ID) {   //首页不可关闭
                return;
            }
            var tabs = this.mainTabs
            var activeName = this.currentTab
            var activeMenu = this.currentMenu
            if (activeName === targetName) {

                tabs.forEach(function (tab, index) {
                    if (tab.id === targetName) {
                        var nextTab = tabs[index + 1] || tabs[index - 1];

                        if (nextTab) {
                            activeName = nextTab.id;
                            activeMenu = nextTab.id;
                        }
                    }
                });

            }

            this.currentTab = activeName
            this.currentMenu = activeMenu

            this.mainTabs = tabs.filter(function (tab) { return tab.id != targetName })
        },
        clickTab: function (tab) {
            this.currentMenu = this.mainTabs[tab.index * 1].id
        },
        signOut: function () {
            myAjax("post", this, "/api/Account/SignOut", null, function (response) {
                if (isSuccess(response))
                    window.location.href = "login.html";
            });
        },
        //修改密码关闭事件
        closeUpdatePwdDialog: function () {
            this.updatePwddialogVisible = false
        }

    },
    mounted: function () {
        setPageHeight();
        var app = this;
        window.onresize = function () {
            setPageHeight();
        }
        if (isStatic != 'y') {
            this.menuPid = null;
        }

    },
    updated: function () {


        
        this.$nextTick(function () {

            this.handleCurTabs(this.currentTab);
        })



    },
    created: function () {
        var currApp = this;
        myAjax("get", this, "/api/Index/IndexData", null, function (response) {
            currApp.menuData = response.data.menuData;
            currApp.name = response.data.name;
        });


    }

});

$(function () {
    $("#myMenu .ul-list").hover(null, function () {
        $(this).parent().hide();
        $(this).parent().next().hide();
        //$("#myMenu").css("display", "none");
    });

});
Vue.component('menus', {
    props: ['menusdata', 'pid', 'mainTabs', 'currentTab'],
    template: '<div><div v-for="(menu,i) in menusdata" ><template v-if="menu.parentId==pid"><el-submenu popper-class="el-menu-aaaaa"  :index="menu.id" v-if="existChild(menu.id)" ><template slot="title"><i v-if="menu.icon" :class="menu.icon " ></i><span  slot="title">{{menu.name}}</span></template><div class="el-menu-vertical-demo"> <menus :menusdata="menusdata" :pid="menu.id" v-on:toggle = "dotoggle"  ></menus></div></el-submenu ><el-menu-item :index="menu.id"  @click="addTab(menu.code,menu.name,menu.url)"  v-else ><i v-if="menu.icon" :class="menu.icon"></i>{{menu.name}}</el-menu-item></template></div></div>  ',
    // template: '<div><div v-for="menu in menusdata" ><template v-if="menu.parentId==pid"><el-submenu :index="menu.id" v-if="existChild(menu.id)" ><template slot="title"><i v-if="menu.icon" :class="menu.icon"></i><span slot="title">{{menu.name}}</span></template><menus :menusdata="menusdata" :pid="menu.id" v-on:toggle = "dotoggle"  ></menus></el-submenu ><el-menu-item :index="menu.id"  @click="addTab(menu.code,menu.name,menu.url)"  v-else ><i v-if="menu.icon" :class="menu.icon"></i>{{menu.name}}</el-menu-item></template></div></div>  ',
    // template: `
    //             <div>
    //             <div v-for="menu in menusdata" >
    //                 <template v-if="menu.parentId==pid">
    //                     <el-submenu :index="menu.id" v-if="existChild(menu.id)" >
    //                     <template slot="title">
    //                             <i v-if="menu.icon" :class="menu.icon"></i>
    //                         <span slot="title">{{menu.name}} </span>
    //                     </template>
    //                     <menus :menusdata="menusdata" :pid="menu.id" ></menus>
    //                     </el-submenu >
    //                 <el-menu-item :index="menu.id"  @click="iframechange(menu.url)"  v-else >
    //                     <i v-if="menu.icon" :class="menu.icon"></i>{{menu.name}}
    //                 </el-menu-item>
    //                 </template>
    //             </div>
    //           </div> 
    //         `,
    methods: {
        existChild: function (id) {
            var array = this.menusdata.filter(function (item) {
                return item.parentId == id
            })


            //判断是否有子节点
            return array.length > 0
        },
        iframechange: function (url) {

            mainTabs =
                { id: '', name: '', url: url }

            window.top.app.$refs.iframe.src = mainTabs.url;
        },
        addTab: function (id, tabname, url) {

            this.$emit('toggle', id, tabname, url);
        },
        dotoggle: function (id, tabname, url) {
            this.$emit('toggle', id, tabname, url);
        }

    }
});
Vue.component('my-aside', {
    template: '<el-aside width="200px" style=""><el-menu default-active="17741894-2691-42ad-a7d7-08d6c16c9daf" class="el-menu-vertical-demo"><menus :menusdata="menuData" pid="00000000-0000-0000-0000-000000000000"></menus></el-menu></el-aside>',
    // template: `
    // <el-aside width="200px" style="">
    //     <el-menu  default-active="5fb42499-298c-4268-010c-08d6b33ff0d2" class="el-menu-vertical-demo">
    //         <menus :menusdata="menuData" pid="00000000-0000-0000-0000-000000000000"></menus>
    //     </el-menu>
    // </el-aside>
    // `,
    data: function () {
        return {
            menuData: [],//左侧菜单数据
        }
    }
});


function contains(arrays, obj) {
    var i = arrays.length;
    while (i--) {
        if (arrays[i].id === obj) {
            return i;
        }
    }
    return false;
}

//时间类型格式转换过滤器
function formatDate(date, fmt) {
    date = new Date(date);
    if (typeof (fmt) === "undefined") {
        fmt = "yyyy-MM-dd HH:mm:ss";
    }
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    }
    for (let k in o) {
        if (new RegExp('(${k})').test(fmt)) {
            let str = o[k] + ''
            fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
        }
    }
    return fmt
};

//定义一个时间过滤器
Vue.filter("FormatDate", function (date, fmt) {
    return formatDate(date, fmt);
});

